//引入字体图标样式
require("../../assets/fonts/iconfont.css");
//引入axios
const axios = require("../../assets/js/axios.js");
//引入自定义js
let obj = require("../../assets/js/my.js");
let addTabs = obj.addTabs;
let tab = obj.tab;
let $ = obj.$;
//引入自己的样式
require("./sports_course.less");
window.addEventListener("load", function () {
	addTabs("sport");
	tab("#tab a", "active");

	// 动态数据渲染
	function courseRender(data) {
		//新课程渲染
		// 得到图片
		let newcourse = data.shift();
		$(
			"#cardNewcourse"
		).innerHTML = ` <div class="container new" data-id = ${newcourse.courseId}> 
        <img src="${axios.defaults.baseURL}${newcourse.imgurl}" alt="" class="course-img">
        <h5 class="title">${newcourse.name}</h5>
        <p class="desc c9f">${newcourse.desc}</p>
        </div>`;
		//课程数组
		data.forEach((v) => {
			$(
				"#cardcourse"
			).innerHTML += `<div class="container old" data-id = ${v.courseId}>
            <img src="${axios.defaults.baseURL}${v.imgurl}" alt="" class="course-img">
            <h5 class="title">${v.name}</h5>
            <p class="desc ">${v.desc}</p>
            </div>`;
		});
	}
	(async function () {
		// 发送ajax请求并返回数据
		let ss = await axios.get("/api/train/courseList");
		ss = ss.data.data;
		// console.log(ss);
		courseRender(ss);
		//点击课程跳转,并携带Id
		//新课标
		$("#cardNewcourse").addEventListener("click", function (e) {
			let parentNode = e.target.parentNode;
			if (parentNode.classList.contains("new")) {
				location.href =
					"./sports_course_details.html?courseId=" + parentNode.dataset.id;
			}
		});
		//课程
		$("#cardcourse").addEventListener("click", function (e) {
			let parentNode = e.target.parentNode;
			if (parentNode.classList.contains("old")) {
				location.href =
					"./sports_course_details.html?courseId=" + parentNode.dataset.id;
			}
		});
	})();
});
